<template>
  <div class="echart" id="cpsHomeLine"></div>
</template>
<script>
import echart from 'echarts'
import { getEleday, getLoadRate } from '@/api/scada'

export default {
    name: "echart",
    props: {},
    data() {
        return {

            option: {
                textStyle: {
                    fontWeight: 400,
                    fontSize: 14,
                    color: '#666'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    textStyle: {
                        fontWeight: 400,
                        fontSize: 14,
                        color: '#666'
                    },
                    icon: 'circle',
                    selectedMode: true,
                    right: 50,
                    selected: {
                        '日用电量': true,
                        '总负荷': false,
                    }
                },
                grid: {
                    left: 20,
                    right: 50,
                    top: 50,
                    bottom:10,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#E8E8E8",
                            width: 1
                        }
                    }

                },

                yAxis:
                    [
                        {
                            name: '千瓦时',
                            nameTextStyle: {
                                fontWeight: 400,
                                fontSize: 14,
                                color: '#666',
                            },
                            show:false,
                            type: 'value',
                            axisLine: {
                                show: false,
                            },
                            position: 'left',
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "#E8E8E8"
                                }
                            },
                        },
                        {
                            name: '千瓦',
                            nameTextStyle: {
                                fontWeight: 400,
                                fontSize: 14,
                                color: '#666'
                            },
                            type: 'value',
                            axisLine: {
                                show: false,
                            },
                            axisTick: {
                                show: false
                            },
                            position: 'left',
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: "#E8E8E8"
                                }
                            },
                        },
                    ],
                series: [
                    {
                        name: '总负荷',
                        showSymbol: false,
                        data: [],
                        type: 'line',
                        itemStyle: {
                            color: "#46A4F7"
                        },
                        smooth: true
                    },
                    {
                        name: '日用电量',
                        yAxisIndex: 1,
                        showSymbol: false,
                        data: [],
                        type: 'line',
                        itemStyle: {
                            color: "#92D66E"
                        },
                        smooth: true
                    },
                ]
            }

        };
    },

    mounted() {
        let me = this;
        let echartBox = document.querySelector('#cpsHomeLine')
        let myChart = echart.init(echartBox)
        myChart.on('legendselectchanged', function (params) {
            console.log(params);
            let {name, selected} = params;

            for (let key in selected) {
                if (key === name) {
                    if(name==='日用电量') {
                        myChart.setOption({
                            yAxis:[
                                {
                                    show:false,
                                },
                                {
                                    show:true
                                }
                            ]
                        });
                    } else {
                        myChart.setOption({
                            yAxis:[
                                {
                                    show:true,
                                },
                                {
                                    show:false
                                }
                            ]
                        });
                    }

                    setTimeout(()=>{
                        myChart.dispatchAction({
                            type: 'legendSelect',
                            name: key
                        });
                    },100)

                }
                else {
                    myChart.dispatchAction({
                        type: 'legendUnSelect',
                        // 图例名称
                        name: key
                    })
                }
            }

        });

        Promise.all([getLoadRate(), getEleday()]).then(results => {
            console.log(results)
            let arr = []
            let brr = []
            if (results[0].code === 200) {
                arr = results[0].result;
                this.option.xAxis.data = arr.map(item => item.dataTime)
                this.option.series[0].data = arr.map(item => +item.loadRate)
            }
            if (results[1].code === 200) {
                brr = results[1].result;
                this.option.xAxis.data = brr.map(item => item.dataTime)
                this.option.series[1].data = brr.map(item => +item.electricity)
            }
            myChart.setOption(this.option, true);
        })

    },
    computed: {},
    created() {
    },
    watch: {},
    methods: {},
    components: {}
};
</script>

<style scoped lang="scss">
  .echart {
    height: 240px;
  }
</style>
